<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天界面</title>
    <script src="js/jquery.js"></script>
    <script src="js/layer/layer.js"></script>
    <script src="js/config.js"></script>
</head>
<body>
<div>
    <ul id="message">

    </ul>
</div>
<input type="text" placeholder="好友账号" id="friend_name">
<input type="button" value="添加好友" id="add_friend">
<div>
    <ul id="friends">

    </ul>
</div>
<div>
    <span>发送给: <span id="send_to"></span></span>
    <textarea id="send_message" cols="30" rows="10"></textarea>
    <input type="button" value="发送" id="send">
</div>
</body>
</html>
<script>
var socket = new WebSocket(websocket_host);

socket.onmessage = function (ev) {
    var data = JSON.parse(ev.data);
    switch (data.type) {
        case 'login':
            $.ajax({
                url:api_host + '/bind_client',
                data:{
                    token:localStorage.getItem('token'),
                    client_id:data.client_id
                },
                dataType:'json',
                type:'post',
                success:function (data) {
                    console.log(data);
                },
                error:function () {
                    layer.alert('登录失败');
                }
            });
            break;
        case 'msg':
            var li = "<li>" + data.from + ":"+ new Date().toLocaleString() +":" + data.msg + "</li>";
            $("#message").append(li);
            break;
        case 'logout':
            layer.alert('您的账号在别处登录',function () {
                window.localStorage.removeItem('token');
                window.localStorage.removeItem('my_name');
                window.location.replace('login.html');
            });
            break;
    }

};

//获取好友列表
$.ajax({
    url:api_host + '/friends',
    data:{token:localStorage.getItem('token')},
    dataType:'json',
    type:'post',
    success:function (data) {
        if (data.code == 1) {
            for(i in data.data) {
                var obj = data.data[i];
                $("#friends").append("<li onclick='checkout_friend(this)'>"+ obj.user_name +"</li>")
            }
        }
    },
    error:function () {
        layer.alert('网络错误');
    }
});

//发送消息
$("#send").click(function () {
    var message = $("#send_message").val();
    var friend_name = $("#send_to").html();
    $.ajax({
        url:api_host + '/message/send',
        data:{
            token:localStorage.getItem('token'),
            friend_name:friend_name,
            msg:message
        },
        dataType:'json',
        type:'post',
        success:function (data) {
            if (data.code == 1) {
                var li = "<li>" + window.localStorage.getItem('my_name') + ":"+ new Date().toLocaleString() +":" + message + "</li>";
                $("#message").append(li);
                $("#send_message").val('');
            } else {
                layer.alert(data.msg);
            }
        },
        error:function () {
            layer.alert('网络错误');
        }
    });
});

//添加好友
$("#add_friend").click(function () {
    var friend_name = $("#friend_name").val();
    $.ajax({
        url:api_host + '/friend/add',
        data:{token:localStorage.getItem('token'),friend_name:friend_name},
        dataType:'json',
        type:'post',
        success:function (data) {
            layer.alert(data.msg);
        },
        error:function () {
            layer.alert('网络错误');
        }
    });
});

/**
 * 切换发送人
 * @param obj
 */
function checkout_friend(obj){
    $("#send_to").html($(obj).html())
}
</script>